<template>
	<view class="orderdetails-page bgimg2 bgF8F8F8">
		<u-navbar :title="title" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>

		<view class="rounded-lg bgF8F8F8 px-2 py-3">
			<view class="flex align-center bg-white p-3 box-shadow2 rounded-lg">
				<image class="rounded" :src="detail.peipei.heading" mode="aspectFill" style="width: 176rpx;height: 176rpx;">
				</image>
				<view class="flex flex-column flex-1 ml-2">
					<view class="flex align-center">
						<text class="fs-32 text-black font-weight-light">{{detail.peipei.nickname}}</text>
						<image v-if="detail.peipei.is_verified === 1" src="/static/imgs/renzheng.png" mode="aspectFill"
							class="w-32 h-32 ml-1">
						</image>
						<image v-if="detail.peipei.nationality && detail.peipei.nationality.logo"
							:src="detail.peipei.nationality.logo" mode="aspectFill" class="w-32 h-32 ml-1 rounded-circle flex-shrink">
						</image>
						<view class="flex align-center bgFF4CBE rounded-circle px-1 ml-1">
							<image :src="`/static/imgs/${detail.peipei.gender === 2?'sex':'sex1'}.png`" mode="aspectFill"
								style="width: 20rpx;height: 20rpx;"></image>
							<text class="text-white fs-20">{{detail.peipei.age}}</text>
						</view>
						<view class="flex align-center flex-1 justify-end">
							<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-36 h-36"></image>
							<text
								class="ftFF685E fs-26 font-weight-light">{{abbreviateNumber(detail.peipei.fire_balance || 0)}}</text>
						</view>
					</view>
					<view class="flex align-center mt-2">
						<view class="rounded px-1 py-1 bgD5EDF8 flex align-center " v-for="(item,index) in detail.interests"
							:key="index">
							<image :src="item.icon" mode="aspectFill" class="w-32 h-32"></image>
							<text class="ft666666 fs-22 ml-1">{{item.name}}</text>
						</view>
					</view>
					<view class="flex align-center justify-between mt-3">
						<view class="flex align-center">
							<view class="flex align-center ftFF0073">
								<text class="fs-34 font-weight-light">{{detail.price}}</text>
								<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
							</view>
							<text class="fs-24 text-black letter-spacing ml-1">/ {{$t('hhh.t7')}}</text>
						</view>
						<text class="ft666666 fs-28">x{{detail.hours}}</text>
					</view>
				</view>
			</view>

			<view class="bg-white px-2 py-3  rounded-lg mt-3 box-shadow2">
				<view class="flex align-center justify-between fs-28 text-black mb-3">
					<text>{{$t('hhh.t89')}}</text>
					<view class="flex align-center fs-28 text-black">
						<text>{{detail.total_amount}}</text>
						<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
					</view>
				</view>
				<view class="flex align-center justify-between fs-28 text-black border-bottom pb-3">
					<text>{{$t('hhh.t90')}}</text>
					<view class="flex align-center fs-28 text-black">
						<text>- {{detail.coupon_amount}}</text>
					</view>
				</view>
				<view class="flex align-center justify-end fs-28 text-black pt-3">
					<text>{{$t('hhh.t91')}}:</text>
					<text class="ftFF0073 font-weight-bold ml-1">{{detail.actual_amount}}</text>
					<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
				</view>
			</view>

			<view class="bg-white px-2 py-3 rounded-lg mt-3">
				<view class="flex align-center justify-between fs-28 text-black pb-3 mb-2">
					<text>{{$t('hhh.t65')}}</text>
					<view class="flex align-center fs-28 text-black">
						<text>{{appointment_date || '--'}}</text>
					</view>
				</view>
				<view class="flex align-center justify-between fs-28 text-black">
					<text>{{$t('hhh.t67')}}</text>
					<view class="flex align-center fs-28 text-black">
						<text>{{appointment_time || '--'}}</text>
					</view>
				</view>
			</view>

			<view class="bg-white px-2 py-3  rounded-lg mt-3 box-shadow2">
				<view class="flex align-center justify-between">
					<text class="ft666666 fs-28">{{$t('hhh.t99')}}</text>
					<view class="flex align-center">
						<image src="/static/imgs/copy.png" mode="scaleToFill" class="w-32 h-32 flex-shrink" @tap="copyText"></image>
						<text class="ml-1 fs-28 text-black">{{detail.payment_no}}</text>
					</view>
				</view>
				<view class="flex align-center justify-between my-2">
					<text class="ft666666 fs-28">{{$t('hhh.t214')}}</text>
					<view class="flex align-center">
						<text class="ml-1 fs-28 text-black">{{detail.create_time}}</text>
					</view>
				</view>
				<view class="flex align-center justify-between" v-if="detail.status > 2">
					<text class="ft666666 fs-28">{{$t('hhh.t215')}}</text>
					<view class="flex align-center">
						<text class="ml-1 fs-28 text-black">{{detail.pay_time}}</text>
					</view>
				</view>
			</view>

			<view class="position-fixed left-0 right-0 bottom-0 bg-white p-3">
				<view class="flex align-center text-white fs-28 font-weight-bold justify-end ">
					<view v-if="detail.status > 4 && detail.is_rated === 0" class="bg110124 rounded-circle px-3 py-2"
						@tap="requestshow = true">
						{{$t('hhh.t117')}}
					</view>
					<view v-if="detail.status === 1" class="bg110124 rounded-circle px-3 py-2 ml-2" @tap="cancelOrder">
						{{$t('hhh.t212')}}
					</view>
					<view v-if="detail.status === 2" class="bg110124 rounded-circle px-3 py-2 ml-2" @tap="payshow = true">
						{{$t('hhh.t95')}}
					</view>
					<view v-if="detail.status === 4" class="bg110124 rounded-circle px-3 py-2 ml-2" @tap="startImmediately">
						{{$t('hhh.t96')}}
					</view>
					<view v-if="detail.status === 5" class="bg110124 rounded-circle px-3 py-2 ml-2" @tap="completeshow = true">
						{{$t('hhh.t97')}}
					</view>
					<view v-if="detail.status === 6 && detail.is_rated === 0" class="bg110124 rounded-circle px-3 py-2 ml-2"
						@tap="leaveshow = true">
						{{$t('hhh.t98')}}
					</view>
				</view>
				<u-gap height="80" bgColor="transparent"></u-gap>
			</view>
		</view>

		<u-modal :show="completeshow" :title="$t('hhh.t97')" :showCancelButton="true" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="completeshow = false" @confirm="confirmComplete">
			<view class="fs-32 text-center pt-5">{{$t('hhh.t216')}}</view>
		</u-modal>


		<u-modal :show="payshow" title="Pay now" :showCancelButton="true" :cancelText="$t('hhh.t26')"
			:confirmText="$t('hhh.t24')" @cancel="payshow = false" @confirm="confirmPay">
			<view class="fs-32 text-center pt-5">{{$t('hhh.t217')}}</view>
		</u-modal>

		<u-popup :show="requestshow" :round="10" mode="center">
			<view class="position-relative p-4 box-sizing" style="width: 600rpx;">
				<view class="fs-32 font-weight-bold text-black text-center">{{$t('hhh.t94')}}</view>

				<view class="bgF6F7F9 rounded-lg  px-2 py-1 mt-5">
					<u--textarea height="100" v-model="info.reason"
						placeholder="Please enter the reason for after-sales request"></u--textarea>
				</view>

				<view class="bgF6F7F9 rounded-lg px-2 py-1 mt-3">
					<u--input inputAlign="left" placeholder="Please enter your contact information" border="surround"
						v-model="info.contact" :customStyle="{
						'border':0
					}"></u--input>
				</view>

				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold"
					@tap="requestconfirm">{{$t('hhh.t31')}}
				</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="requestshow = false"></image>
			</view>
		</u-popup>

		<u-popup :show="leaveshow" :round="10" mode="center">
			<view class="position-relative p-4 box-sizing" style="width: 600rpx;">
				<view class="fs-32 font-weight-bold text-black text-center">{{$t('hhh.t218')}}</view>
				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center">
					<u-rate count="5" v-model="rate" :allowHalf="true" activeColor="#FFCC2C" inactiveColor="#DDE1E6"
						size="50"></u-rate>
				</view>

				<u-gap height="80" bgColor="transparent"></u-gap>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold"
					@tap="leaveconfirm">{{$t('hhh.t31')}}</view>

				<image class="position-absolute closeicon" src="/static/imgs/close.png" mode="aspectFill"
					@tap="leaveshow = false"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		abbreviateNumber
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				title: '',
				status: 1,
				completeshow: false,
				requestshow: false,
				leaveshow: false,
				info: {
					reason: '',
					contact: ''
				},
				rate: 1,
				detail: {
					peipei: {
						nationality: {}
					}
				},
				appointment_date: '',
				appointment_time: '',
				payshow: false
			}
		},
		onLoad(option) {
			this.id = option.id
			switch (Number(option.status)) {
				case -1:
					this.title = this.$t('hhh.t213')
					break
				case 1:
					this.title = this.$t('hhh.t100')
					break
				case 2:
					this.title = this.$t('hhh.t101')
					break
				case 4:
					this.title = this.$t('hhh.t102')
					break
				case 5:
					this.title = this.$t('hhh.t103')
					break
				case 6:
					this.title = this.$t('hhh.t104')
					break
			}
			this.orderDetail()
		},
		methods: {
			abbreviateNumber,
			cancelOrder() {
				HttpApi.orderCancel({
					order_id: this.id
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: this.$t('hhh.t112')
						})
						this.orderDetail()
					}
				})
			},
			orderDetail() {
				HttpApi.orderDetail({
					order_id: this.id
				}).then(res => {
					if (res.code === 1) {
						this.detail = res.data
						this.appointment_date = this.detail.appointment_time.split(' ')[0]
						this.appointment_time = this.detail.appointment_time.split(' ')[1]
					}
				})
			},
			confirmComplete() {
				HttpApi.orderFinish({
					order_id: this.id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t114'))
						this.completeshow = false
						this.orderDetail()
					}
				})
			},
			leaveconfirm() {
				HttpApi.orderRate({
					order_id: this.id,
					score: this.rate
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t114'))
						this.leaveshow = false
						this.orderDetail()
					}
				})

			},
			confirmPay() {
				HttpApi.paywithbalance({
					order_id: this.id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t113'))
						this.payshow = false
						this.orderDetail()
					}
				})
			},
			startImmediately() {
				HttpApi.orderStart({
					order_id: this.id
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t114'))
						this.orderDetail()
					}
				})
			},
			requestconfirm() {
				if (!this.info.contact || !this.info.reason) {
					uni.$tools.toast(this.$t('hhh.t115'))
					return
				}
				HttpApi.orderFeedback({
					order_id: this.id,
					contact: this.info.contact,
					content: this.info.reason
				}).then(res => {
					if (res.code === 1) {
						uni.$tools.toast(this.$t('hhh.t116'))
						this.requestshow = false
						this.orderDetail()
					}
				})
			},
			copyText() {
				uni.setClipboardData({
					data: this.detail.payment_no,
					success: () => {
						console.log('复制成功');
						uni.showToast({
							title: '复制成功'
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
						console.error('复制失败:', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.orderdetails-page {
		min-height: 100dvh;
	}
</style>